<!-- 逆变器详情页面 -->
<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />

	<view class="base-message">
		<uv-cell-group style="background-color: #ffffff;">
			<uv-cell title="逆变器名称：" :value="detailData.basicBO?.name"></uv-cell>
			<uv-cell title="设备ID：" :value="detailData.basicBO?.eqId"></uv-cell>
			<uv-cell title="品牌/型号：" :value="`${detailData.basicBO?.manufactor}/${detailData.basicBO?.model}`"></uv-cell>
			<uv-cell title="SN：" :value="detailData.basicBO?.sn"></uv-cell>
			<uv-cell title="额定交流功率(kW)：" :value="detailData.basicBO?.power"></uv-cell>

			<!-- 展开和收起部分 -->
			<uv-collapse :value="isCollapseOpen" @change="handleCollapseChange">
				<uv-collapse-item title="更多信息" :name="1">

					<uv-cell title="动态信息：" :value="detailData.basicBO?.status"></uv-cell>
					<uv-cell title="设备状态：" :value="detailData.basicBO?.status"></uv-cell>
					<uv-cell title="功率因数：" :value="detailData.basicBO?.gonglv"></uv-cell>
					<uv-cell title="频率(Hz)：" :value="detailData.basicBO?.frequency"></uv-cell>
					<uv-cell title="交流总无功功率(kVar)：" :value="detailData.basicBO?.exchange"></uv-cell>
					<uv-cell title="交流总有功功率(KW)：" :value="detailData.basicBO?.rendered"></uv-cell>
					<uv-cell title="直流输入总功率(kw)：" :value="detailData.basicBO?.direct"></uv-cell>
					<uv-cell title="机内温度()：" :value="detailData.basicBO?.eleTemp"></uv-cell>
					<uv-cell title="运行时间(h)：" :value="detailData.basicBO?.onLineTime"></uv-cell>
				</uv-collapse-item>
			</uv-collapse>
		</uv-cell-group>

		<!-- 发电量图表信息 -->
		<view class="ele-charts">
			<view class="top">
				发电量
			</view>
			<!-- 中间区域 -->
			<view class="middle">
				<view class="left" style="width: 50%; height: 280rpx;">

					<view class="charts"
						style="width: 500rpx; height: 360rpx;position: absolute;top: -25rpx; left: -45rpx;">
						<l-echart ref="chartGuiRef" @finished="initGuiyi"></l-echart>
					</view>

				</view>

				<view class="right">
					<view class="item">
						<image class="img" src="@/static/images/img/zujianrongliang.svg"></image>

						<view class="value">
							<view class="title">
								组件容量kWp
							</view>
							<view class="num">
								{{detailData.eleGenBO?.capacity}}
							</view>
						</view>
					</view>

					<view class="item">
						<image class="img" src="@/static/images/img/fadiangonglv.svg"></image>

						<view class="value">
							<view class="title">
								发电功率kW
							</view>
							<view class="num">
								{{detailData.eleGenBO?.power}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 下侧区域 -->
			<view class="bottom">
				<view class="one">
					<view class="left">
						<view class="title">
							当日发电量kWh
						</view>
						<view class="num">
							{{detailData.eleGenBO?.sameDay}}
						</view>
					</view>
					<view class="right">
						<view class="title">
							当月发电量kWh
						</view>
						<view class="num">
							{{detailData.eleGenBO?.sameMonth}}
						</view>
					</view>
				</view>
				<view class="two">
					<view class="left">
						<view class="title">
							当年发电量kWh
						</view>
						<view class="num">
							{{detailData.eleGenBO?.sameYear}}
						</view>
					</view>
					<view class="right">
						<view class="title">
							累计发电量MWh
						</view>
						<view class="num">
							{{detailData.eleGenBO?.cumulative}}
						</view>
					</view>
				</view>
			</view>
		</view>



		<!-- 发电量表格信息 -->
		<view class="ele-table">
			<view class="top">
				<view class="left">
					发电
				</view>
				<view class="right">
					<view class="btn1">
						<uv-button type="text" size="small" :class="btnActive == 0 ? 'active':''"
							@click="changeType(0)">直流侧</uv-button>
					</view>
					<view class="btn2">
						<uv-button type="text" size="small" :class="btnActive == 1 ? 'active':''"
							@click="changeType(1)">交流侧</uv-button>
					</view>

				</view>
			</view>
			<view class="th">
				<uv-parse :content="tableHtml"></uv-parse>

			</view>
			<view class="tb">

				<uv-cell bind:click="showReduce" v-if="isAll && state.eleList.length >= 10" is-link
					arrow-direction="up" />
				<uv-cell bind:click="showMore" v-else-if="isAll == false && state.eleList.length >= 10" is-link
					arrow-direction="down" />
			</view>

		</view>


		<!-- 发电量历史信息 -->
		<view class="ele-history">
			<view class="top">
				<view class="left">
					历史数据
				</view>
				<view class="right">
					<view class="date">
						<picker @change="handleDate" :value="index" range-key="label" :range="columns">
							<view class="picker">
								{{columns[index].label}}
							</view>
						</picker>
						<image class="down" src="@/static/images/img/down1.png"></image>
					</view>
					<view class="dateSel">
						<van-icon name="notes-o" bindtap="onDisplay" />

						<!-- 日期类型选择 -->
						<view v-if="columns[index].value == 'day'">
							<picker mode="date" @change="changeDate" :value="date" fields="day">
								<view class="picker">
									{{selectDay}}
								</view>
							</picker>
						</view>

						<view v-else-if="columns[index].value == 'week'">
							<view class="sel_date" @click="selectDate"> {{firstDay}}/{{lastDay}}</view>
							<uv-popup ref="datePopup" closeable mode="bottom" custom-style="height: 25%"
								@close="onClose">
								<view style="width:60rpx; margin: 5rpx 10rpx;">
									<uv-button plain type="primary" @click="handleConfirm" size="small">确认</uv-button>
								</view>

								<weekCalendar :timeBean="timeBean" @lastWeek="lastWeek" @nextWeek="nextWeek"
									@dayClick="dayClick"></weekCalendar>
								<!-- <cusDatePicker  /> -->
							</uv-popup>

						</view>

						<view v-else-if="columns[index].value == 'month'">
							<picker mode="date" @change="changeDate" value="{{date}}"
								v-if="columns[index].value == 'month'" fields="month">
								<view class="picker">
									{{nowMonth}}
								</view>
							</picker>
						</view>
						<view v-else-if="columns[index].value == 'year'">
							<picker mode="date" @change="changeDate" value="{{date}}"
								v-if="columns[index].value == 'year'" fields="year">
								<view class="picker">
									{{nowYear}}
								</view>
							</picker>
						</view>

						<view v-else-if="columns[index].value == 'total'">
							<picker mode="date" @change="changeDate" value="{{date}}" disabled="true" fields="year">
								<view class="picker">
									{{nowYear}}
								</view>
							</picker>
						</view>

					</view>
				</view>
			</view>

			<scroll-view scroll-x>
				<view class="middle">
					<view @click="selHisType(item)" v-for="item in hisTypeList" :key="value"
						:class="['item', {fill: item.value === hisActiceName}]">{{item.label}}</view>
				</view>
			</scroll-view>

			<!-- E charts图表 -->
			<view class="charts">

				<view v-if="showCharts" style="margin-left: 2rpx;">
					<l-echart ref="chartRef" @finished="init"></l-echart>
				</view>

				<view v-else="showCharts == false">
					<view class="noData">暂无数据</view>
				</view>

			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import dayjs from 'dayjs';
	import {
		reqChargeDetail
	} from "@/api/model/chargingStation"
	import {
		reqDayHistory,
		reqWeekHistory,
		reqMonthHistory,
		reqYearHistory,
		reqTotalHistory,
		reqInverterDetail
	} from "@/api/model/photovoltaic.js"
	import cusDatePicker from "@/components/cus-date-picker/cusDatePicker.vue"
	import {
		getWeekDayList
	} from "@/utils/time-utils"
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	import {
		number
	} from "@/uni_modules/uv-ui-tools/libs/function/test";
	// #endif
	const title = ref('详情')
	const detailData = ref({

	})
	const electData = ref({})
	const isCollapseOpen = ref(false)
	const chartRef = ref(null);
	const chartGuiRef = ref(null); //归一化图表 
	//======
	const hisTypeList = ([{
			label: '发电功率',
			value: 'fdgl'
		},
		{
			label: '交流分析',
			value: 'jl'
		},
		{
			label: '直流电流对比',
			value: 'zll'
		},
		{
			label: '直流电压对比',
			value: 'zly'
		},
		{
			label: '直流电流与电压对比',
			value: 'zlly'
		}
	])
	const selectWeek = ref(0)
	const datePopup = ref(null)
	const selectDay = ref('') // 当前选中日期
	const dateShow = ref(false)
	const firstDay = ref(null)
	const lastDay = ref(null)
	const timeBean = ref({})
	const currentEqId = ref(null); //当前设备ID
	const date = ref('') //历史数据选择日期
	const show = ref(false) //是否展示
	const btnActive = ref("0");
	const showCharts = ref(true);
	const showDate = ref(false);
	const columns = ref([{
			value: 'day',
			label: '按日期'
		},
		{
			value: 'week',
			label: '按周'
		},
		{
			value: 'month',
			label: '按月份'
		},
		{
			value: 'year',
			label: '按年份'
		},
		{
			value: 'total',
			label: '全部'
		}
	]);
	const isHistoryEmpty = ref(null);
	const nowMonth = ref(''); // 当前年月
	const Month = ref(''); // 当前月份
	const nowYear = ref(''); // 当前年
	const index = ref(0); // index: 0:按日期; 1:按周； 2:按月份；3:按照年份
	const chartOption = ref({}) //格式echarts图的option
	const hisActiceName = ref('fdgl');
	//======
	const state = reactive({
		eleList: [],
		directList: [],
		currentIndex: 0,
		currentData: null,
		isAll: false
	});

	const tableHtml = ref("")

	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif

		chart.setOption(chartOption.value);
	}
	const initGuiyi = async () => {

		if (chartGuiRef.value == null) return
		// #ifdef APP
		const chart = await chartGuiRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartGuiRef.value.init(echarts, null);
		// #endif
		// console.log("guiOption==", detailData.value?.eleGenBO?.guiyi)

		let option = {
			tooltip: {
				formatter: '{a} <br/>{b} : {c}%'
			},
			// legend:{
			//   z: -1
			// },
			series: [{
				name: 'Pressure',
				type: 'gauge',
				detail: {
					formatter: '{value}'
				},
				progress: {
					show: true,
					width: 8
				},
				axisLine: {
					lineStyle: {
						width: 8
					}
				},
				axisLabel: {
					distance: 10,
					color: '#999',
					fontSize: 10
				},
				splitLine: {
					length: 5,
					lineStyle: {
						width: 2,
						color: '#999'
					}
				},
				anchor: {
					show: true,
					showAbove: true,
					size: 5,
					itemStyle: {
						borderWidth: 10
					}
				},
				detail: {
					valueAnimation: true,
					fontSize: 20,
					offsetCenter: [0, '70%']
				},
				data: [{
					value: detailData.value?.eleGenBO?.guiyi,
					name: '功率归一化'
				}]
			}]
		}
		chart.setOption(option);
	}
	const calculateGrid = (legendData) => {
		const legendItemHeight = 20; // 每个 legend 项的高度
		const legendPadding = 10; // legend 的 padding
		const legendHeight = legendData.length * legendItemHeight + legendPadding;
		const gridOptions = {
			top: 30,
			bottom: Math.max(20, legendHeight), // 确保底部有足够的空间
			left: 50,

		};

		// 设置 grid 的最小尺寸
		const minChartWidth = 400; // 图表主体区域的最小宽度
		const minChartHeight = 500; // 图表主体区域的最小高度
		// 如果 legend 需要的空间过大，调整 grid 的 top 和 bottom
		if (legendHeight > minChartHeight / 2) {
			gridOptions.top = 50; // 增加顶部空间
			gridOptions.bottom = 50; // 增加底部空间
		}

		return gridOptions;
	}


	//根据类型返回echarts的option类型
	const formatOption = (xData, yAxisData, xMin, xMax, xInterval, legendData, seriesData, type) => {

		function formatTimestamp(timestamp) {
			const formattedTime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
			return formattedTime;
		}

		let option = {
			color: ['#6699FF', '#ffd700', '#ff6666', '#e02d1c', '#2dddc2', '#ac6dc0', '#FF8C00', '#00BFFF',
				'#008000', '#FF00FF', '#FFC0CB'
			],
			legend: {
				data: legendData,
				bottom: 25,
				right: '20',
				// height: '1000',
				width: 360,

				left: 'center', // 居中
				type: 'scroll', // 使用滚动方式显示 legend
				pageButtonItemGap: 5, // 分页按钮的间距
				pageButtonGap: 10, // 分页按钮与 legend 的间距
			},
			// grid: calculateGrid(legendData),
			grid: {
				left: '50',
				top: '40',
				bottom: '100',

			},
			xAxis: {
				type: (type == 'day' || type == 'week') ? 'value' : 'category',
				data: xData,
				min: (type == 'day' || type == 'week') ? xMin : '',
				max: (type == 'day' || type == 'week') ? xMax : '',
				interval: xInterval,

				axisLabel: {

					formatter: type != 'year' ? function(value) {
						if (type == 'week') {
							return echarts.format.formatTime("MM-dd", value);

						} else if (type == 'day') {
							return echarts.format.formatTime('hh:mm', value)
						} else if (type == 'month') {
							return echarts.format.formatTime('MM-dd', value)
						} else if (type == 'total') {
							return `${new Date().getFullYear()}`
						}
					} : ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
				}
			},
			yAxis: yAxisData,
			series: seriesData,
			tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
				trigger: 'axis',
				backgroundColor: 'rgba(32, 33, 36,.7)',
				borderColor: 'rgba(32, 33, 36,0.20)',
				borderWidth: 1,
				formatter: function(params) {
					let result = '';
					const formattedDate = formatTimestamp(params[0].value[0]); // 格式化时间戳
					result += `${formattedDate}\n`; // 使用 \n 换行

					// 遍历所有系列
					params.forEach(function(item) {
						//方案1: 写法简洁
						result += `${item.seriesName}: ${
						    item.value?.[1] ?? item.value
						  }\n`;
						//方案2:旧浏览器兼容
						// if (Array.isArray(item.value)) {
						// result += ${item.seriesName}: ${item.value[1]}\n;
						// } else {
						// result += ${item.seriesName}: ${item.value}\n;
						// }
					});

					return result;
				},
				textStyle: { // 文字提示样式
					color: '#fff',
					fontSize: '12'
				},
				confine: true, //不超过试图框

			}
		};
		chartOption.value = option
		init()
		return;

	}
	//选择历史数据的类型
	const selHisType = (e) => {
		console.log("eee===", e)
		hisActiceName.value = e.value


		handlehistory2()
	}
	const handleCollapseChange = (value) => {
		isCollapseOpen.value = value.includes(1); // 根据展开状态更新
	}
	//改变月和年的日期
	const changeDate = (e) => {
		// e.detail.value: 0:按日期； 1:按周； 2:按月； 3:按年； 4:全部
		// console.log("pppp", e, index.value)

		switch (index.value) {
			case 0:
			case 1:
				selectDay.value = e.detail.value

				break;
			case 2:
				nowMonth.value = e.detail.value

				break;

			case 3:
				nowYear.value = e.detail.value

				break;
		}
		handlehistory2()

	}
	/**
	 * 选择周
	 */
	const selectDate = () => {
		datePopup.value.open()
		console.log("打开", datePopup.value)
	}
	/**
	 * 选中了某一日，改变selectDay为选中日
	 */
	const dayClick = (e) => {
		console.log("点击选中时间", e)

		// var timeBean = this.data.timeBean
		timeBean.value.selectDay = e;
		console.log("选中后时间", timeBean.value)

	}
	/**
	 * 点击了上一周，选择周数字减一，然后直接调用工具类中一个方法获取到数据
	 */
	const lastWeek = (e) => {
		selectWeek.value--;
		// var timeBean = this.data.timeBean
		timeBean.value = getWeekDayList(selectWeek.value); // 获取新的周日期列表

		// 如果周数不为 0，重置选中日期为第一天
		if (selectWeek.value !== 0) {
			timeBean.value.selectDay = 0;
		}
	}

	/**
	 * 点击了下一周，选择周数字加一，然后直接调用工具类中一个方法获取到数据
	 */
	const nextWeek = (e) => {
		++selectWeek.value;
		// let timeBean = timeBean.value
		timeBean.value = getWeekDayList(selectWeek.value)

		if (selectWeek.value != 0) {
			timeBean.value.selectDay = 0;
		}
	}
	//日期类型的change事件
	const handleDate = (e) => {
		console.log("切换日期", e)
		//index: 0:按日期；1:周； 2:按月份； 3:按年份； 4:全部
		index.value = e.detail.value

		if (e.detail.value == 0) {
			handlehistory2()
		} else if (e.detail.value == 1) {
			handleConfirm()
		} else {
			handlehistory2()
		}

	}
	//历史选择初始化时间
	const initDate = (date) => {
		date = new Date();
		selectDay.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
		nowMonth.value = `${date.getFullYear()}-${date.getMonth() + 1}`

		//月份
		Month.value = `${date.getMonth() + 1}`
		nowYear.value = `${date.getFullYear()}`
		//按照日期选择
		index.value = 0

	}
	// 判断是否是闰年
	const isLeapYear = (year) => {
		return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)
	}
	// 根据年份和月份返回月份的每一天
	const getDaysArray = (year, month) => {
		const daysInMonth = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
		const days = new Array(daysInMonth[month - 1]).fill().map((_, index) => {
			const day = index + 1
			return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}` // 返回格式: "YYYY-MM-DD"
		})
		return days
	}


	//点击历史数据类型--获取历史数据
	const handlehistory2 = (type, riqi) => {
		var startc = null //x轴开始时间
		var stopc = null //x轴结束时间
		var legendData = []
		//数据展示
		var seriesData = []
		//x轴数据
		var xData = []
		//y轴数据
		var yAxisData = []

		var moban = hisActiceName.value
		var eqId = currentEqId.value
		// console.log("kkkkk", selectDay.value)
		let currentDateType = columns.value[index.value]
		// console.log("日期类型==", currentDateType.value)
		if (currentDateType.value === 'day') {

			var textArr = []
			var xInterval = 3 * 60 * 60 * 1000
			let params = {
				day: selectDay.value,
				moban: moban,
				eqId: currentEqId.value
			}

			reqDayHistory(params).then(({
				data: {
					data
				}
			}) => {
				if (data && data.timegroup.length > 0) {
					startc = data.startc
					stopc = data.stopc

					var serData = data.hisList.map(item => {
						return item.detailList.map((data) => [data.collectionTime, data.value])
					})

					seriesData = data.hisList.map((item) => {
						return ({
							name: item.storageName,
							type: 'line',
							smooth: true,
							symbol: 'none',
							data: item.detailList.map((data) => [data.collectionTime, data
								.value
							]),
							yAxisIndex: (item.unit == 'V' || item.unit == 'kW' || item.unit ==
								'A') ? 0 : 1
						})

					})
					legendData = data.hisList.map((item) => {
						return (item.storageName)
					})
					xData = data.timegroup

					data.multiYaxis.map((item) => {
						textArr.push({
							max: item.max,
							name: item.unit,
						})
					})


					// 创建一个对象来存储每个不同 "unit" 的最大值
					const maxValues = {};
					// 遍历数组，更新y轴最大值
					data.multiYaxis.forEach(item => {
						const {
							unit,
							maxz
						} = item;
						if (!maxValues[unit] || maxz > maxValues[unit]) {
							maxValues[unit] = maxz;
						}
					});

					// 将结果转化为数组形式
					const result = Object.keys(maxValues).map(unit => ({
						name: unit,
						type: "value",
						max: maxValues[unit],
						axisTick: {
							show: false
						},
						splitLine: 5,
						min: 0,
					}));

					yAxisData = result;
					// 自定义比较函数，按照指定顺序排列
					function customSort(a, b) {
						const order = ['kW', 'kVar', 'A', 'V'];
						return order.indexOf(a.name) - order.indexOf(b.name);
					}

					result.sort(customSort);

					formatOption(xData, yAxisData, startc, stopc, xInterval, legendData, seriesData, 'day')

					showCharts.value = true


				} else { //无采集数据

					showCharts.value = false

				}

			})


		} else if (currentDateType.value === 'week') {
			var textArr = []
			var xInterval = 24 * 60 * 60 * 1000
			let params = {
				start: firstDay.value,
				eqId: eqId,
				moban: moban,
				stop: lastDay.value
			}
			reqWeekHistory(params).then(({
				data: {
					data
				}
			}) => {
				if (data && data.timegroup.length > 0) {
					console.log("周--历史数据", data)
					startc = data.startc
					stopc = data.stopc


					var serData = data.hisList.map(item => {
						return item.detailList.map((data) => [data.collectionTime, data.value])
					})

					seriesData = data.hisList.map((item) => {
						return ({
							name: item.storageName,
							type: 'line',
							smooth: true,
							symbol: 'none',
							data: item.detailList.map((data) => [data.collectionTime, data
								.value
							]),
							yAxisIndex: (item.unit == 'kW' || item.unit == 'A') ? 0 : 1
						})

					})
					legendData = data.hisList.map((item) => {
						return (item.storageName)
					})
					xData = data.timegroup

					data.multiYaxis.map((item) => {
						textArr.push({
							max: item.max,
							name: item.unit,
						})
					})


					// 创建一个对象来存储每个不同 "unit" 的最大值
					const maxValues = {};
					// 遍历数组，更新y轴最大值
					data.multiYaxis.forEach(item => {
						const {
							unit,
							maxz
						} = item;
						if (!maxValues[unit] || maxz > maxValues[unit]) {
							maxValues[unit] = maxz;
						}
					});

					// 将结果转化为数组形式
					const result = Object.keys(maxValues).map(unit => ({
						name: unit,
						type: "value",
						max: maxValues[unit],
						axisTick: {
							show: false
						},
						splitLine: 5,
						min: 0,
					}));
					// console.log("9999", result)
					yAxisData = result;
					// 自定义比较函数，按照指定顺序排列
					function customSort(a, b) {
						const order = ['kW', 'kVar', 'A', 'V'];
						return order.indexOf(a.name) - order.indexOf(b.name);
					}

					result.sort(customSort);

					formatOption(xData, yAxisData, startc, stopc, xInterval, legendData, seriesData, 'week')

					showCharts.value = true


				} else { //无采集数据
					showCharts.value = false

				}

			})

		} else if (currentDateType.value === 'month') {

			var year = nowMonth.value.split('-')[0]
			var month = nowMonth.value.split('-')[1]
			var obj = {}
			//月份series的数据
			var monDataArr = []
			xData = getDaysArray(year, month)
			var xInterval = 24 * 60 * 60 * 1000

			let params = {
				eqId: eqId,
				month: month,
				year: year
			}
			reqMonthHistory(params).then(({
				data: {
					data
				}
			}) => {
				if (data && data.hisList.length > 0) {
					startc = data.startc
					stopc = data.stopc

					var samDayData = data.hisList.map((item) => {
						return (item.sameDay)

					})
					//月的legend 数据
					legendData = ['当日发电量']
					//  月份的 seriesData数据
					seriesData.push({
						name: '当日发电量',
						type: 'bar',
						data: samDayData
					})
					//找到月返回的最大值
					var maxValue = data.hisList.reduce(function(prev, current) {
						return (prev.sameDay > current.sameDay) ? prev : current;
					});


					var interval = Math.round(maxValue.sameDay * 100) / 500
					obj = {
						name: "kWh",
						type: 'value',
						max: maxValue.sameDay,
						axisTick: {
							show: false
						},
						min: 0,
						splitNumber: 5,
						interval: interval
					}

					yAxisData = obj

					// return initChart(canvas, width, height, xData, yAxisData, startc,
					// 	stopc, xInterval, legendData, seriesData, 'month');

					formatOption(xData, yAxisData, startc, stopc, xInterval, legendData, seriesData, 'month')

					showCharts.value = true

				} else {

					showCharts.value = false

				}
				console.log("月的历史数据0", data)
			})
		} else if (currentDateType.value === 'year') {
			var year = nowYear.value
			var obj = {}
			//月份series的数据
			var monDataArr = []
			let params = {
				eqId: eqId,
				year: year
			}
			reqYearHistory(params).then(({
				data: {
					data
				}
			}) => {
				if (data && data.hisList.length > 0) {
					startc = data.startc
					stopc = data.stopc
					var samYearData = data.hisList.map((item) => {
						return (item.generation)

					})
					//月的legend 数据
					legendData = ['当年发电量']
					//  月份的 seriesData数据
					seriesData.push({
						name: '当年发电量',
						type: 'bar',
						data: samYearData
					})

					var interval = Math.round(data?.maxz * 100) / 500
					obj = {
						name: "kWh",
						type: 'value',
						max: data?.maxz,

						axisTick: {
							show: false
						},
						min: 0,
						splitNumber: 5,
						interval: interval
					}

					yAxisData = obj
					xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']


					formatOption(xData, yAxisData, startc, stopc, xInterval, legendData, seriesData, 'year')


					showCharts.value = true

				} else { //无历史数据

					showCharts.value = false

				}
				console.log("月的历史数据1", data)
			})
		} else if (currentDateType.value === 'total') {
			var year = nowYear.value
			var obj = {}
			//月份series的数据
			var monDataArr = []
			let params = {
				eqId: eqId
			}
			reqTotalHistory(params).then(({
				data: {
					data
				}
			}) => {
				if (data && data.hisList.length > 0) {
					startc = data.startc
					stopc = data.stopc
					var samYearData = data.hisList.map((item) => {
						return (item.generation)

					})
					//月的legend 数据
					legendData = ['发电量']
					//  月份的 seriesData数据
					seriesData.push({
						name: '发电量',
						type: 'bar',
						data: samYearData
					})

					var interval = Math.round(data?.maxz * 100) / 500
					obj = {
						name: "kWh",
						type: 'value',
						max: data?.maxz,
						axisTick: {
							show: false
						},
						min: 0,
						splitNumber: 5,
						interval: interval
					}

					yAxisData = obj
					xData = data.hisList.map((item) => (
						item.year
					))

					formatOption(xData, yAxisData, startc, stopc, xInterval, legendData, seriesData, 'total')

					showCharts.value = true

				} else { //无历史数据

					showCharts.value = false

				}
				console.log("月的历史数据2", data)
			})
		}

	}

	const handleConfirm = () => {
		initWeekDate()
		if (datePopup.value) {
			datePopup.value.close()
		}

		handlehistory2()
	}
	/**
	 * 电机轴初始化展示周数据
	 */
	const initWeekDate = () => {
		let {
			weekDayList,
			yearMonth
		} = timeBean.value
		let year = yearMonth.split('-')[0]
		let month = Number(yearMonth.split('-')[1])
		if (weekDayList[0].day > weekDayList[6].day) {
			firstDay.value = year + '-' + month + '-' + weekDayList[0].day
			lastDay.value = year + '-' + (month + 1) + '-' + weekDayList[6].day
		} else {
			firstDay.value = year + '-' + month + '-' + weekDayList[0].day
			lastDay.value = year + '-' + month + '-' + weekDayList[6].day
		}
		// console.log("周数据==11", firstDay.value, lastDay.value)

	}
	// 动态生成表格内容
	const generateTable = (data) => {
		let html = `
	    <table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse; width: 100%;">
	      <thead>
	        <tr>
	          <th>名称</th>
	          <th>电压(V)</th>
	          <th>电流(A)</th>
	        </tr>
	      </thead>
	      <tbody>
	  `;

		data.forEach((row) => {
			html += `
	      <tr>
	        <td>${row.name}</td>
	        <td>${row.voltage == null ? '0' : row.voltage }</td>
	        <td>${row.current}</td>
	      </tr>
	    `;
		});

		html += `
	      </tbody>
	    </table>
	  `;
		tableHtml.value = html;
		return html;
	}
	//点击交流侧 和直流侧的btn
	const changeType = (e) => {
		// type: 0:代表直流侧； 1:代表交流侧
		if (e == 0) {
			btnActive.value = e; // 更新激活的按钮类型
			generateTable(detailData.value.directList)
		} else if (e == 1) {
			generateTable(detailData.value.communicationList)
			btnActive.value = e; // 更新激活的按钮类型

		}
	}


	const getDetail = async (id) => {
		let query = {
			eqId: id
		}
		let {
			data
		} = await reqInverterDetail(query)
		// console.log("逆变器详情数据", data)
		detailData.value = data.data
		generateTable(data.data.directList)
		init()
		initGuiyi()
	}
	onMounted(() => {
		// initDate()
	})
	onLoad((option) => {
		initDate()
		currentEqId.value = option.detailId
		getDetail(option.detailId)
		handlehistory2()
		timeBean.value = getWeekDayList(selectWeek.value)
	})
</script>

<style lang="scss" scoped>
	.base-message {
		background: #f0f2f5;

		.ele-charts {
			width: 100%;
			height: 750rpx;
			background-color: #fff;
			margin-top: 30rpx;
			z-index: 2;

			.top {
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 40rpx;
				height: 45rpx;
				padding-left: 32rpx;
				padding-top: 24rpx;
				margin-bottom: 32rpx;
			}

			.middle {
				width: 100%;
				min-height: 300rpx;
				display: flex;

				.left {
					padding-left: 58rpx;
					position: relative;
					z-index: 1;

					.guiyi {
						font-size: 56rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #177DDC;
						position: absolute;
						top: 130rpx;
						left: 117rpx;

						.van-circle {
							z-index: 1;

							.van-circle__text {
								/* top: 37% !important; */
								z-index: 1;
							}

							.van-circle__text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								top: 37% !important;
								z-index: 1;
							}
						}
					}
				}

				.right {
					width: 50%;

					.item {
						width: 260rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;

						image {
							/* width: 64rpx;
				    height: 64rpx; */
							width: 72rpx;
							height: 72rpx;
							margin-right: 40rpx;
							background: rgba(23, 125, 220, 0.06);
							border-radius: 16rpx;
						}

						.value {
							.title {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}

							.num {
								font-size: 56rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #333333;
							}
						}
					}
				}
			}

			.bottom {
				.common-style {
					height: 150rpx;
					margin: 0 32rpx;
					display: flex;
					justify-content: space-between;

					.left,
					.right {
						width: 330rpx;
						height: 138rpx;

						.title {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							margin-left: 24rpx;
							color: #999999;
						}

						.num {
							font-size: 48rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #333333;
							margin-left: 24rpx;
							margin-top: 8rpx;
						}
					}

					.left {
						border-right: 2rpx solid #f3f3f3;
						padding-bottom: 12rpx;
					}
				}

				// 特定样式
				.one {
					@extend .common-style;
					border-bottom: 2rpx solid #f3f3f3;
					padding-top: 20rpx;
				}

				.two {
					@extend .common-style;
				}

			}
		}


		.ele-table {
			width: 100%;
			min-height: 600rpx;
			margin-top: 12rpx;
			background-color: #fff;

			.top {
				height: 96rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 32rpx;

				.left {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					padding-top: 25rpx;
				}

				.right {
					font-size: 24rpx;
					height: 40rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;
					padding: 24rpx 0;

					.btn1,
					.btn2 {
						.active {
							height: 50rpx;
							font-weight: 600;
							color: #177DDC;
						}
					}

					.btn1 {
						border-right: 2rpx solid #cccccc;
					}

					// .btn1 {
					// 	border-right: 2rpx solid #cccccc;

					// 	.active {
					// 		height: 50rpx;
					// 		font-weight: 600;
					// 		color: #177DDC;
					// 		.uv-button--small {
					// 			height: 50rpx;
					// 			font-weight: 600;
					// 			color: #177DDC;
					// 		}
					// 	}
					// }

					// .btn2 {
					// 	.active {
					// 		.uv-button--small {
					// 			font-weight: 600;
					// 			color: #177DDC;
					// 		}
					// 	}
					// }
				}
			}

			.th {
				.header {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.ele-history {
			width: 100%;
			min-height: 620rpx;
			margin-top: 12rpx;
			background-color: #fff;

			.top {
				height: 96rpx;
				margin: 0 32rpx;
				position: relative;

				.left {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					padding-top: 28rpx;

				}

				.right {
					.date {
						position: absolute;
						top: 26rpx;
						left: 34%;
						font-size: 24rpx;
						display: flex;
						margin-top: 8rpx;

						.down {
							width: 24rpx;
							height: 24rpx;
							margin-top: 5rpx;
						}
					}

					.dateSel {
						position: absolute;
						top: 26rpx;
						left: 51%;
						width: 350rpx;
						height: 48rpx;
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2rpx solid #F2F2F2;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						.sel_date {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}


			.middle {
				display: flex;
				align-items: center;
				justify-content: center;
				/* overflow-x: scroll; */
				width: 900rpx;

				.item {
					min-width: 120rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 4rpx;
					font-size: 24rpx;
					white-space: nowrap;
					color: #666666;
					text-align: center;
					background: rgba(23, 125, 220, 0.1);
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					margin: 0 12rpx;

					.item1 {
						width: 168rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: rgba(23, 125, 220, 0.1);
						border-radius: 4rpx;
						font-size: 24rpx;

						color: #666666;
						text-align: center;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						margin: 0 12rpx;
					}

					.item2 {
						width: 178rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: rgba(23, 125, 220, 0.1);
						border-radius: 4rpx;
						font-size: 24rpx;

						color: #666666;
						text-align: center;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						margin: 0 12rpx;
					}

				}

				.fill {
					background: rgba(23, 125, 220, 0.5);
					color: #177DDC;
				}
			}

			.charts {
				/* width: 900rpx; */
				min-height: 640rpx;
				margin-bottom: 30rpx;

				.noData {
					text-align: center;
					margin-top: 40rpx
				}

			}
		}


	}
</style>